<template>
	<view class="write-offs-list">
		<view class="search-wrapper flex-align">
			<view class="flex-grow-1 flex-align input">
				<van-icon name="search" size="18" />
				<input v-model="searchValue" placeholder="手机号/卡号" class="flex-grow-1" @confirm='search' />
			</view>
		</view>
		<u-line color="#f2f2f2"></u-line>
		<view class="record-list pb-20" style="margin-top: 100rpx;">
			<view v-for="(record, index) in passlist" :key="index" class="record-card  mb-4 ">
				<view class="card-content p-4">
			
					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
							<view class="">
								<text>{{ record.created_at  || '' }}</text>
							</view>
						</view>
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
							<view>{{ record.billing_item_name || ''  }}</view>
						</view>
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
							<view>{{ record.founder || ''  }}/{{ record.channel_name || ''  }}</view>
						</view>
						
					</view>
					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;border-bottom: 1rpx #e5e5e5 solid;">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
							<view class="">
								<text>{{ record.consume_trade_no || ''  }}</text>
								<image style="width: 26rpx;height: 26rpx;" @click="copyId(record)"
									src="https://sass-test.doit10019.com/upload/202504/21105351-38218363892843890.png?attname=fuzhi111.png"
									mode=""></image>
							</view>
						</view>
						<view  @click="showDetail(record)"
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;color: #00aa00; ">
							<view v-if="record.deduct_num==1 && record.record_state==3">已核销<text style="color:red">已撤销
								</text></view>
							<view v-else-if="record.deduct_num==-1 && record.record_state==3">已撤销</view>
							<view v-else-if="record.deduct_num==1 && record.record_state==1">已核销</view>
						</view>
					</view>
					
					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
							<view class="">
								<text>{{ record.card_name || ''  }}</text>
							</view>
						</view>
						<view  @click="showDetail(record)"
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
							<view class="">
								<text style="color: #0055ff;">{{ record.record_type_name || ''  }}</text>
							</view>
						</view>
					</view>
			
					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
							<view class="">
								<text>{{ record.code_no || ''  }}</text>
								<image style="width: 26rpx;height: 26rpx;" @click="copyId1(record)"
									src="https://sass-test.doit10019.com/upload/202504/21105351-38218363892843890.png?attname=fuzhi111.png"
									mode=""></image>
							</view>
						</view>
						<view  @click="showDetail(record)"
							style="display: flex;flex-direction: row; justify-content: space-between;align-items: center; font-size: 26rpx; ">
							<view class="">
								<text>-{{ record.paid || ''  }}</text>
								<text style="margin-left: 10rpx;color: #0055ff;">余:{{ record.else_money || ''  }}</text>
							</view>
						</view>
					</view>
			
					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view style="display: flex;flex-direction: row;align-items: center; font-size: 26rpx;"  v-if="record.user_mobile"> 
							<image style="width: 30rpx;height: 30rpx;border-radius: 50% 50%;" src="/static/logo.png" mode=""></image>
							<text>{{ record.username == null ? '散客': record.username }}</text>
							<!-- <view class="" style="margin-left: 10rpx;">
								<u-tag :text="record.vip_info.name" plain plainFill size="mini"></u-tag>
							</view> -->
						</view>
						<view v-if="record.outer_code != '--'"  @click="showDetail(record)"
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
							<view class="">
								<text style="margin-right: 10rpx;">手环: {{ record.outer_code || ''  }}</text>
								<text
									v-if="record.check_state==2||record.record_state==3">{{record.deposit_state || '' }}({{ record.deposit || '' }})</text>
								<text v-else style="color: red">{{record.deposit_state || '' }} ({{ record.deposit || '' }})</text>
							</view>
						</view>
					</view>
			
					<view
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
							<view class="" v-if="record.user_mobile">
								<text>{{ record.user_mobile||''}}</text>
								<image style="width: 26rpx;height: 26rpx;" @click="copyId2(record)"
									src="https://sass-test.doit10019.com/upload/202504/21105351-38218363892843890.png?attname=fuzhi111.png"
									mode=""></image>
							</view>
						</view>
						<view @click="showDetail(record)"
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
							<view class="" style="display: flex;flex-direction: row;">
								<view style="margin-right: 10rpx;"  v-if="record.outer_code != '--'">超时费: 实际支付/{{record.over_fee || '' }}</view>
								<u-tag v-if="record.record_state==1"
									:type="record.check_state == 1 ? 'warning':'success'"
									:text="checkStateList[record.check_state]" size="mini"></u-tag>
								<u-tag type="error" size="mini" text="已撤销" ></u-tag>
								
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="list"  v-for="(item,index) in ordersList" :key="index" >
			<view class="item d-flex" >
				<view style="margin-right: 20rpx;">
					<image :src="item.head_pic" mode="" style="width: 80rpx;height: 80rpx;border-radius: 50% 50%;"></image>
				</view>
				<view class="flex-grow-1">
					<view class="flex-space-between">
						<view class="flex-align">
							<view class="user-name">{{item.username}}</view>
							<view class="sex" v-if="item.sex == 1">男 </view>
							<view class="sex"  v-if="item.sex == 2">女</view>
							<view class="sex"  v-if="item.sex == 0">未知</view>
							<view class="sex" >{{item.base_age}}</view>
						</view>
						<view class="name">{{item.goods_name}}</view>
					</view>
					<view class="flex-space-between" style="margin-top: 20rpx;">
						<view class="flex-align">
							<view class="tel">{{item.phone}}</view>
							<view class="date">{{item.created_at}}</view>
						</view>
						<view class="value">-1</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				searchValue: '',
				filterData: {},
				filterList: [{
						label: '时间范围',
						prop: 'time',
						options: [{
								label: '今日',
								value: 0
							},
							{
								label: '本月',
								value: 1
							},
							{
								label: '本年',
								value: 2
							},
						]
					},
					{
						label: '所属部门',
						prop: 'dept',
						options: [{
								label: '1号馆',
								value: 0
							},
							{
								label: '2号馆',
								value: 1
							},
							{
								label: '3号馆',
								value: 2
							},
							{
								label: '4号馆',
								value: 3
							},
						]
					},
					{
						label: '产品分类',
						prop: 'classify',
						options: [{
								label: '课程',
								value: 0
							},
							{
								label: '门票',
								value: 1
							},
							{
								label: '会员卡',
								value: 2
							},
							{
								label: '商品',
								value: 3
							},
							{
								label: '场地',
								value: 4
							},
						]
					},
				],
				listQuery: { //分页
					pageSize: 5,
					pageNo: 1,
				},
				totalPage: "",
				ordersList: [],
				searchKey: "", //搜索关键词
				val: '',
				type_self: '',
				passlist: [],
				checkStateList: [],
				total1: '',
				total2: '',
				total3: '',
				type: ''
			}
		},
		onLoad(options) {
			this.type = options.type
			this.type_self = options.type
			if (options.type == 1) {
				this.today_consume_record()
			} else if (options.type == 2) {
				this.today_consume_record1()
			} else if (options.type == 3) {
				this.today_consume_record2()
			}
		},
		onShow() {
			this.conflist()
		},
		methods: {
			showDetail(record) {
				uni.navigateTo({
					url: `../ticket_card/detail?selectionArr=${encodeURIComponent(JSON.stringify(record))}` 
				})
			},
			copyId(item) {
				// 获取要复制的文本内容
				let text = item.consume_trade_no;
				// 调用uni.setClipboardData()函数进行复制操作
				uni.setClipboardData({
					data: text.toString(), // 设置要复制的文本内容
					success(res) {
						console.log("成功复制到剪贴板");
					},
					fail(err) {
						console.error("复制失败", err);
					}
				});
			},
			copyId(item) {
				// 获取要复制的文本内容
				let text = item.consume_trade_no;
				// 调用uni.setClipboardData()函数进行复制操作
				uni.setClipboardData({
					data: text.toString(), // 设置要复制的文本内容
					success(res) {
						console.log("成功复制到剪贴板");
					},
					fail(err) {
						console.error("复制失败", err);
					}
				});
			},
			copyId1(item) {
				// 获取要复制的文本内容
				let text = item.code_no;
				// 调用uni.setClipboardData()函数进行复制操作
				uni.setClipboardData({
					data: text.toString(), // 设置要复制的文本内容
					success(res) {
						console.log("成功复制到剪贴板");
					},
					fail(err) {
						console.error("复制失败", err);
					}
				});
			},
			// 搜索字
			search(val) {
				this.val = val.detail.value
				if (this.type == 1) {
					this.today_consume_record()
				} else if (this.type == 2) {
					this.today_consume_record1()
				} else if (this.type == 3) {
					this.today_consume_record2()
				}
			},
			async conflist() {
				let params = {};
				let res = await venues.conflist(params);
				if (res.code == 1) {
					this.weekList2 = res.data.channelList
					this.checkStateList = res.data.checkStateList
				}
			},
			async today_consume_record() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.passlist = [];
				let data = {
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
					venue_id: this.venue_id,
					type: this.type_self,
					code_no:this.val
				};
				let res = await venues.today_consume_record(data);
				if (res.code == 1) {
							that.passlist = that.passlist.concat(res.data.list.data); //将数据拼接在一起
					this.totalPage = res.data.list.last_page
					this.total1 = res.data.list.total
				}
			},
			async today_consume_record1() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.passlist = [];
				let data = {
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
					venue_id: this.venue_id,
					type: this.type_self,
					code_no:this.val
				};
				let res = await venues.today_consume_record(data);
				if (res.code == 1) {
					that.passlist = that.passlist.concat(res.data.list.data); //将数据拼接在一起
					this.totalPage = res.data.list.last_page
					this.total2 = res.data.list.total
				}
			},
			async today_consume_record2() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.passlist = [];
				let data = {
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
					venue_id: this.venue_id,
					type: this.type_self,
					code_no:this.val
				};
				let res = await venues.today_consume_record(data);
				if (res.code == 1) {
					that.passlist = that.passlist.concat(res.data.list.data); //将数据拼接在一起
					this.totalPage = res.data.list.last_page
					this.total3 = res.data.list.total
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				if (this.type == 1) {
					this.today_consume_record()
				} else if (this.type == 2) {
					this.today_consume_record1()
				} else if (this.type == 3) {
					this.today_consume_record2()
				}
			},
			// // 今日核销
			// async today() {
			// 	let that = this;
			// 		if (this.listQuery.page === 1) that.ordersList = [];
			// 	let data = {
			// 		page:this.listQuery.page,
			// 		pageSize:this.listQuery.pageSize,
			// 		code_no: this.val,
			// 	};
			// 	let res = await venues.today(data);
			// 	if (res.code == 1) {
			// 		that.ordersList = that.ordersList.concat(res.data.list.data); //将数据拼接在一起
			// 		that.totalPage = res.data.list.last_page
			// 	}
			// },
			// // 历史核销
			// async comsume_index() {
			// 	let that = this;
			// 	if (this.listQuery.page === 1) that.ordersList = [];
			// 	let data = {
			// 		page: this.listQuery.page,
			// 		pageSize: this.listQuery.pageSize,
			// 		code_no: this.val,
			// 	};
			// 	let res = await venues.comsume_index(data);
			// 	if (res.code == 1) {
			// 		that.ordersList = that.ordersList.concat(res.data.data); //将数据拼接在一起
			// 		that.totalPage = res.data.last_page
			// 	}
			// },
			// // 下拉刷新
			// onReachBottom() {
			// 	if (this.totalPage <= this.listQuery.page) {
			// 		uni.showToast({
			// 			title: '没有更多了',
			// 			duration: 2000,
			// 			icon: 'none'
			// 		});
			// 		return
			// 	}
			// 	this.listQuery.page += 1;
			// 	if (this.type == 1) {
			// 		this.today()
			// 	} else{
			// 		this.comsume_index()
			// 	}
			// },
			onConfirm() {
				this.$refs.filter.toggle();
			},
			onChangeFilter(prop, value) {
				if (!this.filterData[prop]) {
					this.$set(this.filterData, prop, []);
				}
				if (this.filterData[prop].includes(value)) {
					this.filterData[prop].splice(this.filterData[prop].indexOf(value), 1)
				} else {
					this.filterData[prop].push(value);
				}
			},
			onReset() {
				this.filterData = {};
				this.$refs.filter.toggle();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.pb-20 {
		padding-bottom: 20rpx;
	}

	/* 列表项样式 */
	.record-card {
		border-radius: 24rpx;
		transition: all 0.2s ease;
		background-color: #fff;
		border-radius: 10rpx;
		width: 94%;
		margin-left: 3%;
		border: 2rpx #fff solid;
		display: flex;
		flex-direction: column;
	}

	.mb-4 {
		margin-bottom: 20rpx;
	}

	.p-4 {
		padding: 20rpx;
	}

	.write-offs-list {
		min-height: 100vh;
		background-color: rgb(242, 242, 242);
		padding-bottom: 40rpx;
		position: relative;

		.search-wrapper {
			padding: 10rpx 30rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 0px 0px 16rpx 16rpx;
			position: fixed;
			z-index: 9;
			width: 100%;
			top: 0;
			left: 0;

			.input {
				padding: 0 28rpx;
				color: rgb(153, 153, 153);
				font-size: 26rpx;
				background-color: rgba(243, 247, 250, 0.95);
				border-radius: 33rpx;
				height: 66rpx;

				/deep/.van-icon {
					padding: 0 4rpx;
				}
			}

			/deep/.van-dropdown-menu {
				box-shadow: none;
				height: 96rpx;

				.van-dropdown-menu__title {
					color: rgb(99, 93, 247);
				}
			}
		}

		.filter-wrapper {
			.filter-list {
				padding: 10rpx 30rpx;
				border-bottom: solid 2rpx rgb(190, 190, 190);

				.filter-title {
					font-size: 28rpx;
					font-weight: 700;
					line-height: 28rpx;
					margin-bottom: 20rpx;
				}

				.filter-item {
					margin-bottom: 39rpx;
				}

				.option-item {
					width: 100%;
					font-size: 24rpx;
					font-weight: 500;
					background-color: rgb(243, 243, 243);
					border-radius: 10rpx;
					height: 60rpx;
					margin-bottom: 16rpx;

					&.active {
						background-color: rgba(99, 93, 247, 0.2);
						color: rgb(99, 93, 247);

						/deep/.van-icon {
							display: block;
						}
					}

					/deep/.van-icon {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: 20%;
						display: none;
					}
				}
			}

			.btns {
				padding: 25rpx 40rpx 22rpx;

				/deep/.van-button {
					font-size: 32rpx;
					font-weight: 700;
				}

				.reset /deep/.van-button {
					color: rgb(136, 136, 136) !important;
				}
			}
		}



		.list {
			box-shadow: 0px 0px 8.36rpx 0.64rpx rgba(0, 0, 0, 0.05);
			background-color: #fff;
			border-radius: 10rpx;
			margin: 20rpx;

			.item {
				font-size: 22rpx;
				padding: 20rpx;
				border-bottom: solid 2rpx rgb(229, 229, 229);

				.sex {
					margin-left: 10rpx;
					color: rgb(153, 153, 153);
				}

				.name {
					color: rgb(136, 136, 136);
				}

				.value {
					color: rgb(99, 93, 247);
					font-size: 24rpx;
					font-weight: 700;
				}

				.tel {
					margin-right: 30rpx;
				}
			}
		}
	}
</style>